<template>
  <div class="saixuan" :style="allWidth + 'margin-top:' + (mt || 40) + 'px'">
    <div v-if="cuts == 2 && !vehicleType" class="li">
      <p class="p1">车辆类别</p>
      <p
        class="p2"
        @click="newoldClick(-1)"
        :class="newoldIndex == -1 ? 'xuan' : ''"
      >
        不限
      </p>
      <div class="list divs" :style="listWidth">
        <div
          class="divs"
          :style="newoldIndex == 1 ? 'color:#64B6A8;' : ''"
          @click="newoldClick(1)"
        >
          到店新车
        </div>
        <div
          class="divs"
          :style="newoldIndex == 2 ? 'color:#64B6A8;' : ''"
          @click="newoldClick(2)"
        >
          二手车
        </div>
      </div>
    </div>
    <div class="li" v-if="cuts == 2">
      <p class="p1">车辆类型</p>
      <p
        class="p2"
        @click="leibieClick(-1)"
        :class="leibieIndex == -1 ? 'xuan' : ''"
      >
        不限
      </p>
      <div class="list divs" :style="listWidth">
        <div
          v-for="(item, index) in type4"
          :key="index"
          @click="leibieClick(item)"
          :class="leibieIndex == item.valueNum ? 'xuan divs' : 'divs'"
        >
          {{ item.valueName }}
        </div>
      </div>
    </div>
    <div class="li">
      <p class="p1">品牌</p>
      <p
        class="p2"
        @click="ppaiClick(-1)"
        :class="ppaiIndex == -1 ? 'xuan' : ''"
      >
        不限
      </p>
      <!--  @mouseenter="ppaiClick(item,'brandChar'+index)"
          @mouseleave="ppaiyichu()" -->
      <div class="list" :style="listWidth" style="position: relative;">
        <div
          v-for="(item, index) in clppsy"
          :key="index"
          @click="ppaiClick(item, 'brandChar' + index)"
          :ref="'brandChar' + index"
          :class="ppaiIndex == item ? 'yiru ppdiv' : 'ppdiv'"
        >
          {{ item }}
          <!-- <div
            class="brandPop"
            v-if="'xz' + item == clppChage"
            @mouseenter="ppaixze = true"
            @mouseleave="ppaixze = false"
          >
            <div
              class="brandPop_item"
              v-for="i in clppArry"
              :key="i.id"
              @click="xzppaiClick(i)"
            >
              <img class="brandPop_item_img" :src="i.brandImage" alt="" />
              <span class="brandPop_item_span">{{ i.brandName }}</span>
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="brandPop2" v-if="brandloading">
      <div
        class="brandPop_item2"
        :class="brandIdToVehicleSeriesId[i.id] ? 'xuan' : ''"
        v-for="i in clppArry"
        :key="i.id"
        @click="xzppaiClick(i, i.id == ppaiData.id)"
      >
        <img class="brandPop_item_img2" :src="i.brandImage" alt="" />
        <span class="brandPop_item_span2">{{ i.brandName }}</span>
      </div>
      <div class="trangle" :style="'left:' + trangleLeft + 'px'"></div>
    </div>
    <div class="li" v-if="ppaiData">
      <p class="p1">车系</p>
      <!-- <p
        class="p2"
        @click="priceClick(-1)"
        :class="priceIndex == -1 ? 'xuan' : ''"
      >
        不限
      </p>
      <div class="list divs" :style="listWidth">
        <div
          v-for="(item, index) in clcxArry"
          :key="index"
          @click="priceClick(item)"
          :class="priceIndex == item.seriesName ? 'xuan divs' : 'divs'"
        >
          {{ item.seriesName }}
        </div>
      </div> -->
      <p
        class="p2"
        @click="priceClick(-1)"
        :class="
          priceIndex == -1 ||
          (Array.isArray(priceIndex) && priceIndex.includes(ppaiData.brandName))
            ? 'xuan'
            : ''
        "
      >
        不限
      </p>
      <div class="list divs" :style="listWidth">
        <div
          class="divs"
          v-for="(item, index) in clcxArry"
          :key="index"
          @click="priceClick(item)"
          :title="item.seriesName"
          :class="
            priceIndex != -1 &&
            priceIndex.includes(ppaiData.brandName + '|' + item.seriesName)
              ? 'xuan div-v line1'
              : 'div-v line1'
          "
        >
          {{ item.seriesName }}
        </div>
      </div>
    </div>
    <div class="li" style="margin-bottom: 17px" v-if="cuts == 2">
      <p class="p1">价格</p>
      <p
        class="p2"
        @click="typeClick8(-1)"
        :class="typeIndex8 == -1 ? 'xuan' : ''"
      >
        不限
      </p>
      <div class="list divs" :style="listWidth">
        <div class="divjg" style="align-items: center; margin-bottom: 8px">
          <div
            v-for="(item, index) in type8"
            :key="index"
            @click="typeClick8(item)"
            :class="typeIndex8 == item.valueNum ? 'xuan divjg' : 'divjg'"
          >
            {{ item.valueName }}
          </div>
        </div>
        <div class="custom">
          <span class="custom_title">自定义</span>
          <div>
            <!-- oninput="value=value.replace(/[^\d]/g,'')" -->
            <input
              class="custom_input"
              type="number"
              v-model="minimumPrice"
              placeholder="最低价"
            />
          </div>
          <div class="bq">-</div>
          <div>
            <input
              class="custom_input"
              placeholder="最高价"
              type="number"
              v-model="highestPrice"
            />
          </div>
          <div class="bq">万</div>
          <div class="custom_qd" @click.stop="confirmPrice">确定</div>
        </div>
      </div>
    </div>
    <div class="li" v-if="cuts == 2">
      <p class="p1">变速箱</p>
      <p
        class="p2"
        @click="transmissionCaseClick(-1)"
        :class="transmissionCaseIndex == -1 ? 'xuan' : ''"
      >
        不限
      </p>
      <div class="list divs" :style="listWidth">
        <div
          v-for="(item, index) in transmissionCaseArr"
          :key="index"
          @click="transmissionCaseClick(item)"
          :class="transmissionCaseIndex == item.valueNum ? 'xuan divs' : 'divs'"
        >
          {{ item.valueName }}
        </div>
      </div>
    </div>
    <div
      class="li"
      v-if="cuts == 2 && (vehicleType != '1' || vehicleType != 1)"
    >
      <p class="p1">车龄</p>
      <p
        class="p2"
        @click="typeClick9(-1)"
        :class="typeIndex9 == -1 ? 'xuan' : ''"
      >
        不限
      </p>
      <div class="list divs" :style="listWidth">
        <div
          v-for="(item, index) in type9"
          :key="index"
          @click="typeClick9(item)"
          :class="typeIndex9 == item.valueName ? 'xuan divs' : 'divs'"
        >
          {{ item.valueName }}
        </div>
      </div>
    </div>

    <div class="li" v-if="cuts == 2 && fuelTypeOfShow">
      <p class="p1">排量</p>
      <p
        class="p2"
        @click="typeClick10(-1)"
        :class="typeIndex10 == -1 ? 'xuan' : ''"
      >
        不限
      </p>
      <div class="list divs" :style="listWidth">
        <div
          v-for="(item, index) in type10"
          :key="index"
          @click="typeClick10(item)"
          :class="typeIndex10 == item.valueNum ? 'xuan divs' : ' divs'"
        >
          {{ item.valueName }}
        </div>
      </div>
    </div>
    <div class="li" v-if="cuts == 2 && vehicleType != 1">
      <p class="p1">里程</p>
      <p
        class="p2"
        @click="typeClick12(-1)"
        :class="typeIndex12 == -1 ? 'xuan' : ''"
      >
        不限
      </p>
      <div class="list divs" :style="listWidth">
        <div
          v-for="(item, index) in type12"
          :key="index"
          @click="typeClick12(item)"
          :class="typeIndex12 == item.valueNum ? 'xuan divs' : 'divs'"
        >
          {{ item.valueName }}
        </div>
      </div>
    </div>
    <div class="li" v-if="cuts == 2 && fuelTypeOfShow">
      <p class="p1">排放标准</p>
      <p
        class="p2"
        @click="typeClick6(-1)"
        :class="typeIndex6 == -1 ? 'xuan' : ''"
      >
        不限
      </p>
      <div class="list divs" :style="listWidth">
        <div
          v-for="(item, index) in type6"
          :key="index"
          @click="typeClick6(item)"
          :class="typeIndex6 == item.valueName ? 'xuan divs' : 'divs'"
        >
          {{ item.valueName }}
        </div>
      </div>
    </div>
    <div class="li" v-if="cuts == 2">
      <p class="p1">燃料类型</p>
      <p
        class="p2"
        @click="typeClick5(-1)"
        :class="typeIndex5 == -1 ? 'xuan' : ''"
      >
        不限
      </p>
      <div class="list divs" :style="listWidth">
        <div
          v-for="(item, index) in type5"
          :key="index"
          @click="typeClick5(item)"
          :class="typeIndex5 == item.valueName ? ' xuan divs' : 'divs'"
        >
          {{ item.valueName }}
        </div>
      </div>
    </div>
    <div class="li" v-if="cuts == 2 && showExtra">
      <p class="p1">佣金</p>
      <p
        class="p2"
        @click="yongjClick(-1)"
        :class="yongjindex == -1 ? 'xuan' : ''"
      >
        不限
      </p>
      <div class="list divs" :style="listWidth">
        <div
          style="
                        display: flex;
                        color: #333333;
                        align-items: center;
                      
                      "
        >
          <input
            @input="yongjChange1"
            type="number"
            placeholder="最低价"
            style="
                          background: #ffffff;
                          border-radius: 4px;
                          border: 1px solid #d0d0d0;
                          height: 32px;
                          line-height: 32px;
                          width: 64px;
                          padding-left: 10px;
                          color: #333;
                          font-size: 16px;
                        "
            v-model="MinimumCommission"
          />
          <span style="margin-right: 3px; margin-left: 3px">-</span>
          <input
            @input="yongjChange2"
            type="number"
            placeholder="最高价"
            v-model="MaximumCommission"
            style="
                          background: #ffffff;
                          border-radius: 4px;
                          border: 1px solid #d0d0d0;
                          height: 32px;
                          line-height: 32px;
                          width: 64px;
                          padding-left: 10px;
                          color: #333;
                          font-size: 16px;
                        "
          />
          <span style="margin-right: 6px; margin-left: 6px">元</span>

          <!-- <div
                        @click.stop="comfirmPrice"
                        style="
                          text-align: center;
                          display: inline-block;
                          height: 32px;
                          line-height: 32px;
                          width: 64px;
                          background: #64b6a8;
                          border-radius: 4px;
                          color: #ffffff;
                          font-weight: 600;
                        "
                      >
                        确定
                      </div> -->
        </div>
      </div>
    </div>
    <div class="li" v-if="cuts == 2 && showExtra">
      <p class="p1">时间</p>
      <p
        class="p2"
        @click="shijClick(-1)"
        :class="shijIndex == -1 ? 'xuan' : ''"
      >
        不限
      </p>
      <div class="list divs" :style="listWidth">
        <el-date-picker
          style="line-height:20px;"
          @change="shijClick"
          value-format="yyyy-MM-dd"
          v-model="value2"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="yixuan" :style="allWidth">
      <div class="na">已选条件：</div>
      <div
        class="li"
        v-for="(item, index) in screenList"
        :key="item.type + item.id"
      >
        {{ item.value }}
        <img src="../../../assets/cha.png" @click="clear(item)" />
      </div>
      <div class="qinchu" v-if="screenList.length > 0" @click="clear(-1)">
        清除全部
      </div>
    </div>
  </div>
</template>

<script>
var count = 99899;
export default {
  props: {
    liWidth: {
      type: String | Number
    },
    mt: {
      type: String | Number
    },
    vehicleType: {
      type: String | Number
    },
    showExtra: {
      type: Boolean,
      default: false
    },
    queryType: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    listWidth() {
      return `width:${
        this.liWidth ? this.liWidth + "px!important;" : "986px!important;"
      }`;
    },
    allWidth() {
      return `width:${
        this.liWidth
          ? +this.liWidth + 214 + "px!important;"
          : "1200px!important;"
      }`;
    }
  },
  watch: {
    vehicleType(newV) {
      if (newV) {
        this.getHouseInfo();
      }
    },
    brandIdToVehicleSeriesId(newV) {
      if (newV) {
        var newA = [];
        this.screenList.map(item => {
          if (item.type == "vehicleBrandModel") {
            item.flag = false;
          }
        });
        for (const key in this.brandIdToVehicleSeriesId) {
          var arr = this.brandIdToVehicleSeriesId[key];
          if (Array.isArray(arr)) {
            if (arr.length == 1) {
              newA.push({
                ...JSON.parse(JSON.stringify(arr[0])),
                id: arr[0].uuid,
                value: arr[0].brandName,
                type: "vehicleBrandModel"
              });
            } else if (arr.length > 1) {
              arr
                .filter(item => item.id)
                .map(item => {
                  newA.push({
                    ...JSON.parse(JSON.stringify(item)),

                    value: item.seriesName,
                    type: "vehicleBrandModel"
                  });
                });
            }
          }
        }
        // this.screenList=this.screenList.concat(newA)
        newA.map(item => {
          if (this.checkFilterData(this.screenList, item.id, item.type)) {
            this.filterData(this.screenList, item.id, item.type)[0].flag = true;
          } else {
            this.screenList.push({ ...item, flag: true });
          }
        });
        this.screenList = this.screenList.filter(item => item.flag);
        // this.screenList = newA;
        // console.log("newA", newA);
      }
    }
  },
  data() {
    return {
      brandloading: false,
      trangleLeft: 10,

      value2: [],
      shijIndex: -1,
      MinimumCommission: "",
      MaximumCommission: "",
      yongjindex: -1,
      cuts: 2,
      type2: [],
      type11: [],
      type4: [],
      type8: [],
      type9: [],
      type10: [],
      type6: [],
      type5: [],
      type12: [],
      leibieIndex: -1,
      priceIndex: -1,
      loucIndex: -1,
      mianjiIndex: -1,
      housesIndex: -1,
      areaIndex: -1,

      // 车辆品牌索引
      clppsy: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      ],
      newoldIndex: -1,
      // 车辆品牌数据
      clppArry: [],
      clppChage: "xz",
      // 判断是否移入品牌选择div中
      ppaixze: false,
      // 选中品牌的数据
      ppaiData: "",
      // 车系数据
      clcxArry: [],
      ppaiIndex: -1,

      transmissionCaseArr: [
        {
          id: 1,
          valueNum: 1,
          valueName: "自动"
        },
        {
          id: 2,
          valueNum: 2,
          valueName: "手动"
        }
      ],
      transmissionCaseIndex: -1,
      typeIndex9: -1,
      typeIndex8: -1,
      typeIndex6: -1,
      typeIndex5: -1,
      typeIndex10: -1,
      typeIndex12: -1,
      minimumPrice: "",
      highestPrice: "",
      minPrice: "",
      maxPrice: "",

      HousesPage: {},
      fuelTypeOfShow: true,
      screenList: []
    };
  },
  created() {
    this.getDictionaries();
  },
  methods: {
    addListen(obj) {
      var tempObj = JSON.parse(JSON.stringify(obj));
      this.HousesPage = Object.assign({}, tempObj);
    },
    checkFilterData(arr = [], id, type) {
      var flag = false;
      return arr.filter(item => item.type == type && item.id == id).length > 0;
    },
    filterData(arr = [], id, type) {
      var flag = false;
      return arr.filter(item => item.type == type && item.id == id);
    },
    clear(item) {
      console.log("item", item);
      if (item != -1) {
        var type = item.type.trim();
        console.log(
          "item.typeitem.typeitem.typeitem.typeitem.typeitem.type",
          type
        );
        if (type == "vehicleClassification") {
          //车辆类型
          this.leibieClick(-1);
        } else if (type == "vehicleBrandModel") {
          //车系
          if (item.uuid) {
            this.xzppaiClick(item, true, "from");
          } else {
            this.priceClick(item);
          }
        } else if (type == "price" || type == "minimumPrice") {
          this.typeClick8(-1);
        } else if (type == "transmissionCase") {
          // 变速箱
          console.log(
            "item.typeitem.typeitem.typeitem.typeitem.typeitem.type",
            type
          );
          this.transmissionCaseClick(-1);
        } else if (type == "vehicleAge") {
          this.typeClick9(-1);
          // 车龄
        } else if (type == "displacement") {
          this.typeClick10(-1);
          // 排量
        } else if (type == "mileage") {
          // 里程
          this.typeClick12(-1);
        } else if (type == "fuelType") {
          this.typeClick5(-1);
          // 燃油类型
        } else if (type == "emissionStandard") {
          this.typeClick6(-1);
          // 排放标准
        } else if (type == "MinimumCommission") {
          this.yongjClick(-1);
          // 佣金
        } else if (type == "MinimumShareTime") {
          this.shijClick(-1);
        }
      } else {
        // 清除全部
        // this.dealObjFnc(1, 1, "delAll");
        // this.HousesPage.vehicleBrandModel = "";
        // this.priceIndex = [];
        // this.initgetHouseInfo();

        this.typeIndex6 = -1;
        delete this.HousesPage.emissionStandard;
        this.typeIndex5 = -1;
        delete this.HousesPage.fuelType;
        this.typeIndex12 = -1;
        delete this.HousesPage.mileage;
        this.typeIndex10 = -1;
        delete this.HousesPage.displacement;
        this.typeIndex9 = -1;
        delete this.HousesPage.vehicleAge;
        this.czTypeIndex22 = -1;
        delete this.HousesPage.transmissionCase;
        this.typeIndex8 = -1;
        delete this.HousesPage.price;
        this.minPrice = "";
        this.maxPrice = "";
        delete this.HousesPage.minimumPrice;
        delete this.HousesPage.highestPrice;
        this.leibieIndex = -1;
        delete this.HousesPage.vehicleClassification;

        this.MinimumCommission = "";
        this.MaximumCommission = "";
        delete this.HousesPage.MinimumCommission;
        delete this.HousesPage.MaximumCommission;
        this.yongjindex = -1;

        delete this.HousesPage.MinimumShareTime;
        delete this.HousesPage.MaximumShareTime;
        this.shijIndex = -1;
        this.value2 = [];

        this.ppaiClick(-1);
        // this.initgetHouseInfo();
      }
    },
    dealOpe(newV) {
      console.log("newVnewVnewVnewV", newV);
      var obj;
      var labelKey;
      var checkArr;
      var screenList = [];
      this.screenList.map(item => {
        if (item.type != "vehicleBrandModel") {
          item.flag = false;
        }
      });

      for (const key in newV) {
        if (Object.hasOwnProperty.call(newV, key)) {
          const element = newV[key];
          // if (!element) return;
          // 没有就新增
          if (
            key == "vehicleClassification" ||
            key == "price" ||
            key == "transmissionCase" ||
            key == "vehicleAge" ||
            key == "displacement" ||
            key == "mileage" ||
            key == "fuelType" ||
            key == "emissionStandard" ||
            key == "minimumPrice" ||
            key == "MinimumCommission" ||
            key == "MinimumShareTime"
          ) {
            labelKey = "";
            obj = "";
            if (key == "vehicleClassification") {
              checkArr = this.type4;
            } else if (key == "price") {
              checkArr = this.type8;
            } else if (key == "minimumPrice") {
              obj = [
                {
                  id: 100868,
                  value: `${element}-${newV["highestPrice"]}万内`,
                  type: key
                }
              ];
            } else if (key == "transmissionCase") {
              checkArr = this.transmissionCaseArr;
              labelKey = "valueNum";
            } else if (key == "vehicleAge") {
              checkArr = this.type9;
            } else if (key == "displacement") {
              checkArr = this.type10;
            } else if (key == "MinimumCommission") {
              obj = [
                {
                  id: ++count,
                  value: `${element}-${newV["MaximumCommission"]}元`,
                  type: key
                }
              ];
            } else if (key == "MinimumShareTime") {
              obj = [
                {
                  id: ++count,
                  value: `${element}~${newV["MaximumShareTime"]}`,
                  type: key
                }
              ];
            } else if (key == "mileage") {
              checkArr = this.type12;
            } else if (key == "fuelType") {
              checkArr = this.type5;
            } else if (key == "emissionStandard") {
              checkArr = this.type6;
            }
            labelKey = labelKey || "valueName";
            obj =
              obj ||
              checkArr
                .filter(item => item[labelKey] == element)
                .map(item => {
                  return {
                    ...JSON.parse(JSON.stringify(item)),
                    value: item.valueName,
                    type: key
                  };
                });
            console.log("objobjobjobj", obj, this.screenList);
            if (!this.checkFilterData(this.screenList, obj.id, key)) {
              console.log("22222", obj);
              screenList.push(...obj);
            }
          }
        }
      }

      screenList.map(item => {
        if (this.checkFilterData(this.screenList, item.id, item.type)) {
          this.filterData(this.screenList, item.id, item.type)[0].flag = true;
        } else {
          this.screenList.push({ ...item, flag: true });
        }
      });
      // console.log("this.screenListthis.screenListthis.screenList", screenList);
      this.screenList = this.screenList.filter(item => item.flag);
      // console.log("this.screenListthis.screenListthis.screenList", screenList);
    },
    getHouseInfo() {
      if (this.vehicleType == 2) {
        //二手
      } else if (this.vehicleType == 1) {
        //新车
        delete this.HousesPage.mileage;
        this.typeIndex12 = -1;
        delete this.HousesPage.vehicleAge;
        this.typeIndex9 = -1;
      }

      // if (this.ppaiIndex != -1&&this.ppaiData) {//有品牌
      // // console.log("123")
      //   if (this.HousesPage.vehicleBrandModel) {
      //     //  console.log("24")
      //     //车系是否存在
      //     this.HousesPage.vehicleBrandModel =
      //       this.ppaiData.brandName + "|" + this.HousesPage.vehicleBrandModel;
      //   } else {
      //     //  console.log("34")
      //     this.HousesPage.vehicleBrandModel = this.ppaiData.brandName;
      //   }
      // }
      if (this.showExtra) {
        // if (
        //   !this.HousesPage.MinimumCommission ||
        //   !this.HousesPage.MaximumCommission
        // ) {
        //   console.log("123");
        //   if (
        //     +this.HousesPage.MinimumCommission >
        //       +this.HousesPage.MaximumCommission ||
        //     +this.HousesPage.MaximumCommission < 0 ||
        //     +this.HousesPage.MinimumCommission < 0
        //   ) {
        //     this.myErrorMessage("最低价不能超过最高价");
        //     return;
        //   }
        // }
        if (
          this.HousesPage.MinimumCommission ||
          this.HousesPage.MaximumCommission
        ) {
          if (
            this.HousesPage.MinimumCommission &&
            this.HousesPage.MaximumCommission
          ) {
            if (
              +this.HousesPage.MinimumCommission >
              +this.HousesPage.MaximumCommission
            ) {
              this.myErrorMessage("最低价不能超过最高价");
              return;
            } else {
              // 通过
            }
          } else {
            console.log(
              this.HousesPage.MinimumCommission,
              this.HousesPage.MaximumCommission
            );
            this.myErrorMessage("请填写最低价或者最高价");
            return;
          }
        }
      }
      this.dealOpe(JSON.parse(JSON.stringify(this.HousesPage)));
      console.log("console", JSON.stringify(this.HousesPage));
      this.$emit("filterQuery", JSON.parse(JSON.stringify(this.HousesPage)));
      // console.log(this.HousesPage);
    },
    yongjClick(item) {
      this.MinimumCommission = "";
      this.MaximumCommission = "";
      delete this.HousesPage.MinimumCommission;
      delete this.HousesPage.MaximumCommission;
      this.yongjindex = -1;
      this.getHouseInfo();
    },
    yongjChange1(e) {
      console.log("1111");
      this.HousesPage.MinimumCommission = this.MinimumCommission;

      this.yongjindex = 1;
      console.log(this.yongjindex);
    },
    yongjChange2(e) {
      this.HousesPage.MaximumCommission = this.MaximumCommission;
      this.yongjindex = 1;
    },
    shijClick(item) {
      if (Array.isArray(item)) {
        this.HousesPage.MinimumShareTime = item[0];
        this.HousesPage.MaximumShareTime = item[1];
        this.shijIndex = 1;
      } else {
        delete this.HousesPage.MinimumShareTime;
        delete this.HousesPage.MaximumShareTime;
        this.shijIndex = -1;
        this.value2 = [];
      }
      this.getHouseInfo();
    },
    // 车辆类别
    newoldClick(i) {
      if (i > 0) {
        this.newoldIndex = i;
        this.HousesPage.vehicleType = i;
      } else {
        this.newoldIndex = -1;
        delete this.HousesPage.vehicleType;
      }

      this.getHouseInfo();
    },
    leibieClick(item) {
      //车辆类型

      if (item != -1) {
        this.leibieIndex = item.valueNum;
        this.HousesPage.vehicleClassification = item.valueName;
        this.getHouseInfo();
        return;
      }
      delete this.HousesPage.vehicleClassification;
      this.leibieIndex = item;

      this.getHouseInfo();
    },
    ppaiClick(item, ref) {
      //品牌
      if (item != -1) {
        this.ppaiIndex = item;
        this.queryBrand(item);
        this.clppChage = "xz" + item;
        this.trangleLeft = this.$refs[ref][0].offsetLeft + 10;
        return;
      }

      this.brandloading = false;
      this.trangleLeft = 10;
      // delete this.HousesPage.model
      this.arr = [];
      this.dealObjFnc(1, 1, "delAll");
      this.HousesPage.vehicleBrandModel = "";
      this.ppaiIndex = item;
      this.clppChage = "xz";
      this.clppArry = [];
      this.ppaiData = "";
      this.getHouseInfo();
    },
    ppaiyichu() {
      let stim = setTimeout(() => {
        if (this.ppaixze) {
          clearTimeout(stim);
          return;
        }
        this.clppChage = "xz";
      }, 100);
    },
    xzppaiClick(item, flag, from) {
      if (!from) {
        //下面筛选删除专用
        this.ppaiData = item;
      }
      var tempArr = [];
      if (this.brandIdToVehicleSeriesId[item.id] && flag) {
        tempArr = this.dealObjFnc(item.id, item, "del1");
        this.priceIndex = tempArr;
      } else {
        //未被选中的
        tempArr = this.dealObjFnc(item.id, item, "set");
        this.priceIndex = tempArr;
      }
      if (
        !tempArr.includes(this.ppaiData.brandName) &&
        item.brandName == this.ppaiData.brandName
      ) {
        // console.log("tempArrtempArrtempArr", this.ppaiData);
        this.ppaiData = "";
        this.clcxArry = [];
      }
      if (!from) {
        //下面筛选删除专用
        this.queryRange(item.id);
      }
      this.HousesPage.vehicleBrandModel = tempArr.join(",");

      // this.queryRange(item.id);
      this.getHouseInfo();
    },
    priceClick(item) {
      //车系

      // if (item != -1) {
      //   this.priceIndex = item.seriesName;
      //   this.HousesPage.vehicleBrandModel = item.seriesName;
      // } else {
      //   this.priceIndex = item;
      //   delete this.HousesPage.vehicleBrandModel;
      // }

      if (item != -1) {
        if (this.priceIndex != -1) {
          this.priceIndex = this.dealObjFnc(item.brandId, item, "set");
        } else {
          this.priceIndex = this.dealObjFnc(item.brandId, item, "set");
        }
        this.priceIndex.length > 0
          ? (this.HousesPage.vehicleBrandModel = this.priceIndex.join(","))
          : delete this.HousesPage.vehicleBrandModel;
      } else {
        this.priceIndex = -1;

        if (this.brandIdToVehicleSeriesId[this.ppaiData.id]) {
          //

          this.HousesPage.vehicleBrandModel = this.dealObjFnc(
            this.ppaiData.id,
            -1,
            "del"
          ).join(",");
        } else {
          this.HousesPage.vehicleBrandModel = this.dealObjFnc(
            this.ppaiData.id,
            this.ppaiData,
            "set"
          ).join(",");
        }
      }
      this.getHouseInfo();
    },
    // 价格
    typeClick8(i) {
      if (i != -1) {
        this.typeIndex8 = i.valueNum;
        this.HousesPage.price = i.valueName;
      } else {
        this.typeIndex8 = -1;
        this.HousesPage.price = "";
      }
      this.minimumPrice = "";
      this.highestPrice = "";
      delete this.HousesPage.minimumPrice;
      delete this.HousesPage.highestPrice;
      this.getHouseInfo();
    },
    // 确定价格
    confirmPrice() {
      console.log(this.minimumPrice);
      console.log(this.highestPrice);
      if (this.minimumPrice != "") {
        this.HousesPage.minimumPrice = this.minimumPrice;
      } else {
        delete this.HousesPage.minimumPrice;
      }
      if (this.highestPrice != "") {
        this.HousesPage.highestPrice = this.highestPrice;
      } else {
        delete this.HousesPage.highestPrice;
      }
      if (!this.minimumPrice && !this.highestPrice) {
        this.$message({
          message: "请输入最低价或最高价",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return;
      }
      if (this.minimumPrice.trim() != "" && this.highestPrice.trim() != "") {
        if (+this.minimumPrice.trim() > +this.highestPrice.trim()) {
          this.$message({
            message: "最低价不能大于最高价",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
      }
      this.typeIndex8 = 999;
      delete this.HousesPage.price;
      this.getHouseInfo();
    },
    // 变速箱
    transmissionCaseClick(i) {
      if (i != -1) {
        this.transmissionCaseIndex = i.valueNum;
        this.HousesPage.transmissionCase = i.valueNum;
      } else {
        this.transmissionCaseIndex = -1;
        delete this.HousesPage.transmissionCase;
      }
      this.getHouseInfo();
    },
    // 车龄
    typeClick9(i) {
      if (i != -1) {
        this.typeIndex9 = i.valueName;
        this.HousesPage.vehicleAge = i.valueName;
      } else {
        this.typeIndex9 = -1;
        this.HousesPage.vehicleAge = "";
      }
      // console.log('111111111111111111111111111',i);
      // console.log('222222222222222222222222222',i.valueName);
      // console.log('333333333333333333333333333',this.HousesPage.vehicleAge);
      this.getHouseInfo();
    },
    // 排量（L）
    typeClick10(i) {
      if (i != -1) {
        this.typeIndex10 = i.valueNum;
        this.HousesPage.displacement = i.valueName;
      } else {
        this.typeIndex10 = -1;
        delete this.HousesPage.displacement;
      }
      this.getHouseInfo();
    },
    // 里程
    typeClick12(i) {
      if (i != -1) {
        this.typeIndex12 = i.valueNum;
        this.HousesPage.mileage = i.valueName;
      } else {
        this.typeIndex12 = -1;
        delete this.HousesPage.mileage;
      }
      this.getHouseInfo();
    },
    // 排放标准
    typeClick6(i) {
      if (i != -1) {
        this.typeIndex6 = i.valueName;

        this.HousesPage.emissionStandard =
          this.queryType["emissionStandard"] == "label"
            ? i.valueName
            : i.valueNum;
      } else {
        this.typeIndex6 = -1;
        delete this.HousesPage.emissionStandard;
      }
      this.getHouseInfo();
    },
    // 燃料类型
    typeClick5(i) {
      if (i != -1) {
        if (i.valueName == "新能源") {
          delete this.HousesPage.displacement;
          delete this.HousesPage.emissionStandard;
          this.typeIndex10 = -1;
          this.typeIndex6 = -1;
          this.fuelTypeOfShow = false;
        } else {
          this.fuelTypeOfShow = true;
        }
        this.typeIndex5 = i.valueName;
        this.HousesPage.fuelType =
          this.queryType["fuelType"] == "label" ? i.valueName : i.valueName;
      } else {
        this.typeIndex5 = -1;
        delete this.HousesPage.fuelType;
      }
      this.getHouseInfo();
    },
    getDictionaries() {
      this.$getHttp("/api/mobile/vehicleOwner/queryDataDictionaryList", {
        type: "2,11,4,8,9,10,6,5,12"
      }).then(data => {
        if (data.code == 200) {
          data.dataDictionaryList.forEach(e => {
            if (e.type == 2) this.type2.push(e);
            if (e.type == 11) this.type11.push(e);
            // 车辆类型
            if (e.type == 4) this.type4.push(e);
            // 价格
            if (e.type == 8) this.type8.push(e);
            // 车龄
            if (e.type == 9) this.type9.push(e);
            // 排量
            if (e.type == 10) this.type10.push(e);
            // 排放标准
            if (e.type == 6) this.type6.push(e);
            // 燃油类型
            if (e.type == 5) this.type5.push(e);
            // 里程
            if (e.type == 12) this.type12.push(e);
          });
        }
      });
    },
    // 查询车辆品牌
    queryBrand(index) {
      this.$getHttp("/api/mobile/vehicleOwner/queryVehicleBrandList", {
        initial: index
      }).then(res => {
        this.clppArry = res.vehicleBrandMapList[index];
        this.brandloading = true;
      });
    },
    // 查询车系
    queryRange(id) {
      this.$getHttp(
        "/api/mobile/vehicleOwner/queryVehicleSeriesListByBrandId",
        {
          brandId: id
        }
      ).then(res => {
        this.clcxArry = res.vehicleSeriesList;
      });
    },
    dealObjFnc(key, value, type) {
      if (type == "set") {
        // var brandIdToVehicleSeriesId = JSON.parse(
        //   JSON.stringify(this.brandIdToVehicleSeriesId)
        // );
        // console.log(JSON.stringify(this.brandIdToVehicleSeriesId, null, 2));
        if (typeof value != "string") {
          value = JSON.parse(JSON.stringify(value));
          console.log("value.brandName", value);
          if (value.brandName) {
            //如果是品牌
            if (this.brandIdToVehicleSeriesId[key]) {
              //如果当前品牌存在
              if (
                this.brandIdToVehicleSeriesId[key].findIndex(
                  item => item.uuid && item.uuid == value.id
                ) > -1
              ) {
                //如果当前品牌id存在
                return this.dealObjFnc(key, value, "get");
              }
              // 上面判断可无
              return this.dealObjFnc(key, value, "get");
            }

            value.uuid = value.id;
            value.id = "";
            console.log("value.brandName", value);
          } else {
            //不然就是车系
          }
        }
        console.log(
          "22222222222222222",
          this.brandIdToVehicleSeriesId[value.id]
        );
        if (!this.brandIdToVehicleSeriesId[key]) {
          // this.brandIdToVehicleSeriesId = Object.assign(
          //   brandIdToVehicleSeriesId,
          //   {
          //     [key]: [value]
          //   }
          // );
          this.brandIdToVehicleSeriesId[key] = [value];
        } else if (this.brandIdToVehicleSeriesId[key]) {
          console.log("123");
          if (
            this.brandIdToVehicleSeriesId[key].findIndex(
              item => item.id == value.id
            ) == -1
          ) {
            this.brandIdToVehicleSeriesId[key].push({ ...value });
          } else {
            var i = this.brandIdToVehicleSeriesId[key].findIndex(
              item => item.id == value.id
            );
            this.brandIdToVehicleSeriesId[key].splice(i, 1);
          }
        }
        return this.dealObjFnc(key, value, "get");
      }
      if (type == "get") {
        var brandIdToVehicleSeriesId = JSON.parse(
          JSON.stringify(this.brandIdToVehicleSeriesId)
        );
        this.brandIdToVehicleSeriesId = Object.assign(
          {},
          brandIdToVehicleSeriesId
        );
        var arr = [];
        var tempArr;
        var tempStr;
        var flag = false;
        console.log(
          "this.brandIdToVehicleSeriesIdthis.brandIdToVehicleSeriesId",
          this.brandIdToVehicleSeriesId,
          value
        );
        for (const key in this.brandIdToVehicleSeriesId) {
          tempArr = this.brandIdToVehicleSeriesId[key];
          console.log("tempArr", tempArr);
          tempStr = tempArr.filter(item => item.uuid)[0].brandName;
          flag = tempArr.filter(item => !item.uuid).length > 0;

          arr = arr.concat(
            tempArr
              .map(item => {
                if (item.uuid) {
                  return !flag ? item.brandName : "";
                } else {
                  return tempStr + "|" + item.seriesName;
                }
              })
              .filter(item => item)
          );
        }
        console.log("arr", arr);

        // brandIdToVehicleSeriesId[value.id]&&brandIdToVehicleSeriesId[value.id].filter(item=>item.id).length>0
        return arr;
      }
      if (type == "del") {
        //( this.ppaiData.id, -1, "del")
        if (value == -1) {
          //清除这品牌所有车系时
          let brandArr = [];
          let brandArrLen = 0;
          if (Array.isArray(this.brandIdToVehicleSeriesId[key])) {
            brandArr = this.brandIdToVehicleSeriesId[key].filter(
              item => item.uuid
            );
            brandArrLen = brandArr.length;
          }

          this.brandIdToVehicleSeriesId[key] = brandArr;
        } else {
          var index = Array.isArray(this.brandIdToVehicleSeriesId[key])
            ? this.brandIdToVehicleSeriesId[key].findIndex(
                item => item.id == value.id
              )
            : -1;
          if (index > -1) {
            //清除这品牌单个车系时
            this.brandIdToVehicleSeriesId[key].splice(index, 1);
          } else {
            //这品牌增加单个车系时
            this.dealObjFnc(key, value, "set");
          }
        }
        return this.dealObjFnc(key, value, "get");
      }
      if (type == "del1") {
        delete this.brandIdToVehicleSeriesId[key];
        return this.dealObjFnc(key, value, "get");
      }
      if (type == "delAll") {
        //所有
        this.brandIdToVehicleSeriesId = {};
        return [];
      }
    }
  }
};
</script>

<style lang="less" scoped>
.brandPop2 {
  box-sizing: border-box;
  width: 698px;
  // height: 200px;
  border: 1px solid #64b6a8;
  position: relative;
  left: 142px;
  background-color: #fff;
  z-index: 10000;
  display: flex;
  flex-wrap: wrap;
  // overflow: auto;
  // padding-left: 20px;
  padding: 6px 0 6px 12px;
  margin-bottom: 12px;
  .brandPop_item2 {
    display: flex;
    align-items: center;
    color: #333333;
    min-height: 32px;
    margin-right: 24px;
    margin-bottom: 6px;
    cursor: pointer;
    &.xuan {
      color: #64b6a8;
    }
    .brandPop_item_img2 {
      width: 32px;
      height: auto;
    }
    .brandPop_item_span2 {
      margin-left: 6px;
      font-size: 14px;
      font-weight: 400;
    }
  }
}
.saixuan {
  color: #333;
  width: 1200px;
  margin: 0 auto;
  font-size: 0;
  margin-top: 40px;
  // padding-bottom: 20px;
  position: relative;
  .li {
    display: flex;
    flex-wrap: wrap;
    .custom {
      display: flex;
      align-items: center;
      .custom_title {
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        margin-right: 7px;
      }
      .custom_input {
        box-sizing: border-box;
        width: 78px;
        height: 32px;
        background-color: #ffffff;
        border-radius: 4px;
        border: 1px solid #d0d0d0;
        padding: 10px;
      }
      .custom_qd {
        width: 78px;
        height: 32px;
        background-color: #64b6a8;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 600;
        color: #ffffff;
        text-align: center;
        line-height: 32px;
        margin-left: 10px;
        cursor: pointer;
      }
      .bq {
        width: 20px;
        height: 32px;
        color: #000;
        font-size: 16px;
        text-align: center;
        line-height: 32px;
      }
    }
    .p1 {
      font-size: 16px;
      font-weight: 600;
      margin-right: 12px;
      width: 70px;
    }
    .p2 {
      font-size: 16px;
      margin-right: 12px;
      cursor: pointer;
      width: 50px;
    }
    .divs {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      font-size: 16px;
      margin-right: 30px;
      margin-bottom: 10px;
    }
    .divjg {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      font-size: 16px;
      cursor: pointer;
      align-items: center;
      margin-right: 30px;
    }
    .div-v {
      display: inline-block;
      font-size: 16px;
      padding-right: 14px;
      vertical-align: top;
      margin-bottom: 10px;
      width: calc(100% / 4);
      overflow: hidden;
      box-sizing: border-box;
      margin-right: 0;
      height: 22px;
      line-height: 22px;
    }
    .list {
      width: 1040px;
      div {
        cursor: pointer;
      }
    }
    .xuan {
      color: #64b6a8;
    }
    .yiru {
      width: 25px;
      height: 25px;
      border-radius: 25px;
      background-color: #64b6a8;
      text-align: center;
      line-height: 25px;
      color: #fff;
    }
    .ppdiv {
      position: relative;
      display: inline-block;
      font-size: 16px;
      margin-right: 30px;
      vertical-align: top;
      margin-bottom: 10px;
      width: 25px;
      height: 25px;
      margin-right: 14px;
      text-align: center;
      .brandPop {
        width: 160px;
        height: 200px;
        border: 1px solid red;
        position: absolute;
        right: -170px;
        bottom: -215px;
        background-color: #fff;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        overflow: auto;
        padding-left: 20px;
        padding-top: 10px;
        .brandPop_item {
          display: flex;
          align-items: center;
          color: #000;
          margin-bottom: 10px;
          .brandPop_item_img {
            width: 32px;
            height: 32px;
          }
          .brandPop_item_span {
            margin-left: 10px;
            font-size: 12px;
            font-weight: 400;
            color: #333333;
          }
        }
      }
    }
  }
}
.yixuan {
  box-sizing: border-box;
  padding-top: 15px;
  padding-left: 16px;
  width: 1200px;
  min-height: 60px;
  background-color: #f7f7f7;
  margin-left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  .na {
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
  }
  .li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 4px 28px 4px 10px;
    color: #333333;
    color: #64b6a8;
    border: 1px solid #64b6a8;
    margin-right: 12px;
    img {
      position: absolute;
      width: 17px;
      height: 17px;
      top: 7px;
      right: 3px;
      cursor: pointer;
    }
  }
  .qinchu {
    display: inline-block;
    vertical-align: middle;
    width: 86px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #999999;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
  }
  .qinchu,
  .li,
  .na {
    margin-bottom: 12px;
  }
}
.custom_qd {
  width: 78px;
  height: 32px;
  background-color: #64b6a8;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  line-height: 32px;
  margin-left: 10px;
  cursor: pointer;
}
</style>
